<template>
  <div class="nav-menus" :class="config.layout.layoutMode">
    <!-- 回到首页 -->
    <!-- <router-link to="/" class="h100" target="_blank" title="大屏"> -->
    <router-link to="/admin/Bigboard/bigboardFirst" class="h100" title="大屏">
      <div class="nav-menu-item">
        <Icon
          :color="config.getColorVal('headerBarTabColor')"
          class="nav-menu-icon"
          name="el-icon-Monitor"
          size="18"
        />
      </div>
    </router-link>
    <!-- 消息盒子 待审核工单-->
    <el-dropdown class="h100" size="large" placement="bottom" trigger="click">
      <div class="nav-menu-item">
        <el-badge
          :value="workOrder.topNewsNum ? workOrder.topNewsNum : ''"
          class="item"
        >
          <Icon
            :color="config.getColorVal('headerBarTabColor')"
            class="nav-menu-icon"
            name="el-icon-Bell"
            size="18"
          />
        </el-badge>
      </div>
      <template #dropdown>
        <el-dropdown-menu class="dropdown-menu-box">
          <el-dropdown-item
            v-for="(item, index) in workOrder.topNewsObj"
            :key="item.id"
            @click="toExamine(item)"
          >
            <span>{{ isValueOfWorkOrder(item) }}</span>
            {{ item.workinforNumber }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <!-- 是否全屏 -->
    <div
      @click="onFullScreen"
      class="nav-menu-item"
      :class="state.isFullScreen ? 'hover' : ''"
    >
      <Icon
        :color="config.getColorVal('headerBarTabColor')"
        class="nav-menu-icon"
        v-if="state.isFullScreen"
        name="el-icon-Close"
        size="18"
      />
      <Icon
        :color="config.getColorVal('headerBarTabColor')"
        class="nav-menu-icon"
        v-else
        name="el-icon-FullScreen"
        size="18"
      />
    </div>
    <!-- 中英文翻译 -->
    <el-dropdown
      @visible-change="onCurrentNavMenu($event, 'lang')"
      class="h100"
      size="large"
      :hide-timeout="50"
      placement="bottom"
      trigger="click"
      :hide-on-click="true"
    >
      <div
        class="nav-menu-item pt2"
        :class="state.currentNavMenu == 'lang' ? 'hover' : ''"
      >
        <Icon
          :color="config.getColorVal('headerBarTabColor')"
          class="nav-menu-icon"
          name="iconfont icon-shuyi_fanyi-36"
          size="18"
        />
      </div>
      <template #dropdown>
        <el-dropdown-menu class="dropdown-menu-box">
          <el-dropdown-item
            v-for="item in config.lang.langArray"
            :key="item.name"
            @click="editDefaultLang(item.name)"
          >
            {{ item.value }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <!-- 是否清除缓存 -->
    <!-- visible-change下拉框出现/隐藏时触发 -->
    <el-dropdown
      v-if="adminInfo.super"
      @visible-change="onCurrentNavMenu($event, 'clear')"
      class="h100"
      size="large"
      :hide-timeout="50"
      placement="bottom"
      trigger="click"
      :hide-on-click="true"
    >
      <div class="nav-menu-item">
        <div>
          <Icon
            :color="config.getColorVal('headerBarTabColor')"
            class="nav-menu-icon"
            name="el-icon-Delete"
            size="18"
          />
        </div>
      </div>
      <!-- 点击下拉选项 -->
      <template #dropdown>
        <el-dropdown-menu class="dropdown-menu-box">
          <!-- <el-dropdown-item @click="onClearCache('tp')"
            >清除系统缓存</el-dropdown-item
          > -->
          <el-dropdown-item @click="onClearCache('storage')"
            >清除游览器缓存</el-dropdown-item
          >
          <el-dropdown-item @click="onClearCache('all')"
            >一键清理所有</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <!-- 用户盒子 -->
    <el-dropdown class="h100" size="large" placement="bottom" trigger="click">
      <div class="nav-menu-item">
        <Icon
          :color="config.getColorVal('headerBarTabColor')"
          class="nav-menu-icon"
          name="el-icon-User"
          size="18"
        />
      </div>
      <template #dropdown>
        <el-dropdown-menu class="dropdown-menu-box">
          <el-dropdown-item @click="jump">用户中心</el-dropdown-item>
          <el-dropdown-item @click="onLogout">注销登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <div @click="config.setLayout('showDrawer', true)" class="nav-menu-item">
      <Icon
        :color="config.getColorVal('headerBarTabColor')"
        class="nav-menu-icon"
        name="iconfont icon-ziyuan"
        size="18"
      />
    </div>
    <Config />
  </div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { useConfig } from "@/store/config"; //后台布局仓库
import { editDefaultLang } from "@/lang";
import screenfull from "screenfull";
import { useAdminInfo } from "@/store/adminInfo";
import { Local, Session } from "@/utils/storage";
import { ADMIN_INFO, BA_ACCOUNT } from "@/store/constant/cacheKey";
import router from "@/router";
import { useRegion } from "@/store/backend/SysM/region";
import { useAccess } from "@/store/backend/DeviceM/access";
import { useOverView } from "@/store/backend/EquipM/overView";
import { useNavTabs } from "@/store/navTabs";
import { useBigBoardB } from "@/store/backend/BigBoard/bigBoard2";
import { useWorkOrder } from "@/store/backend/WorkOrder/order";
import Config from "./config.vue";

const config = useConfig();
const adminInfo = useAdminInfo();
const region = useRegion();
const access = useAccess();
const overview = useOverView();
const navTabs = useNavTabs();
const bigBoardB = useBigBoardB();
const workOrder = useWorkOrder();

//当前页面默认选项
const state = reactive({
  isFullScreen: false, //是否全屏
  currentNavMenu: "", //当前路由
  // showLayoutDrawer: false,
});

const onFullScreen = () => {
  if (!screenfull.isEnabled) {
    return false;
  }
  screenfull.toggle();
  screenfull.onchange(() => {
    state.isFullScreen = screenfull.isFullscreen;
  });
};
//删除功能多种选项
const onClearCache = (type: string) => {
  if (type == "storage" || type == "all") {
    const adminInfo = Local.get(ADMIN_INFO);
    const baAccount = Local.get(BA_ACCOUNT);
    Session.clear();
    Local.clear();
    Local.set(ADMIN_INFO, adminInfo);
    Local.set(BA_ACCOUNT, baAccount);
    if (type == "storage") return;
  }
  router.go(0); //清理之后刷新页面
};

//是否清除缓存下拉框的显现
const onCurrentNavMenu = (val: boolean, name: string) => {
  state.currentNavMenu = val ? name : "";
};

//判断该工单的属性为待派单还是待完工确认
const isValueOfWorkOrder = (data: any) => {
  if (data.status === "0") {
    return "待派工:";
  } else if (data.status === "3") {
    return "待完工确认:";
  }
};

//跳转至工单或者巡检任务详情进行考核与审核
const toExamine = (item: any) => {
  console.log("跳转至工单或者巡检任务详情进行考核与审核", item);

  workOrder.$patch((state) => {
    state.single = item;
  });
  //跳转至工单详情页
  router.push({
    path: "/admin/WorkOrder/detail",
  });
};

//用户注销登录
const onLogout = () => {
  Local.remove(ADMIN_INFO);
  adminInfo.$reset(); //重置
  region.regionIds = []; //用户区域id 还原默认值
  access.companyid = null; //用户的企业id 还原默认值
  access.switch = false; //设备启停 还原默认值
  overview.main = false; //总览头部展示与否 还原默认值
  navTabs.state.tabsViewRoutes = []; //清除路由菜单缓存
  bigBoardB.markers.length = 0;
  bigBoardB.markers = [];
  router.push({ name: "Home" });
};
//跳转至用户中心
const jump = () => {
  router.push({ name: "user" });
};
</script>
<style lang="scss">
.nav-menus.Default {
  border-radius: var(--el-border-radius-base);
  box-shadow: var(--el-box-shadow-light);
}

.nav-menus {
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: auto;
  background-color: v-bind('config.getColorVal("headerBarBackground")');
  overflow: hidden;

  .nav-menu-item {
    height: 100%;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    .nav-menu-icon {
      box-sizing: content-box;
      color: v-bind('config.getColorVal("headerBarTabColor")');
    }

    &:hover {
      .icon {
        animation: twinkle 0.3s ease-in-out;
      }
    }
  }

  .admin-info {
    display: flex;
    height: 100%;
    padding: 0 10px;
    align-items: center;
    cursor: pointer;
    user-select: none;
    color: v-bind('config.getColorVal("headerBarTabColor")');
  }

  .admin-name {
    padding-left: 6px;
    white-space: nowrap;
  }

  .nav-menu-item:hover,
  .admin-info:hover,
  .nav-menu-item.hover,
  .admin-info.hover {
    background: v-bind('config.getColorVal("headerBarHoverBackground")');
  }
}

.dropdown-menu-box :deep(.el-dropdown-menu__item) {
  justify-content: center;
}

.admin-info-base {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 10px;

  .admin-info-other {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 0;

    .admin-info-name {
      font-size: var(--el-font-size-large);
    }
  }
}

.admin-info-footer {
  padding: 10px 0;
  margin: 0 -12px -12px -12px;
  display: flex;
  justify-content: space-around;
}

.pt2 {
  padding-top: 2px;
}

@keyframes twinkle {
  0% {
    transform: scale(0);
  }

  80% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}
</style>
